Bootstrap Snippet Fixed Header + Navbar + Animation Effects v.2 using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css"> <!-- thats important for animation effects -->
        <link href="https://fonts.googleapis.com/css?family=Arbutus" rel="stylesheet"> <!-- Demo -->
</head>
<body>
    <header> 
       <nav class="navbar navbar-default navbar-fixed-top" data-aos="fade-down" data-aos-duration="2600" data-aos-once="true" >
            <div class="container-fluid">
                <div class="navbar-header"><a class="navbar-brand navbar-link" href="#">Dize Design AOS-Header v.2</a>
                    <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                </div>
                <div class="collapse navbar-collapse" id="navcol-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li role="presentation"><a href="#">Home </a></li>
                        <li role="presentation"><a href="#">Project </a></li>
                        <li role="presentation"><a href="#">About Us</a></li>
                        <li role="presentation"><a href="#">Contact </a></li>
                    </ul>
                </div>
            </div>
        </nav>
        
        <div class="container">
            <div class="row">
                <div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true" >
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                </div>
                <div class="col-md-12" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true" ><center>
                    <a class="btn btn-link" target="blank" href="https://www.instagram.com/exp__designer/">
                        Lorem Ipsum
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Demo */
body
{
    font-family: 'sans-serif';
}
/* Header settings */
header {
  height:100vh; /* you can change that height to 100%, please get sure youre Header is ready */
  background-attachment:fixed;
  background-size:cover;
  background-position:left;
  background-repeat:no-repeat;
  background-image:linear-gradient(to right, black 0%, white 100%), url('https://static.pexels.com/photos/225600/pexels-photo-225600.jpeg');
  background-blend-mode:screen; /* you can remove that, if you do that delet the "linear-gradient(to right, black 0%, white 100%)," */
}
@media (max-width:767px){
  header {
  background-attachment:inherit;
}
}
header .row
{
    margin-top:40vh; /* Handle the row */
}
@media (max-width:767px){
    header .row
{
    margin-top:30vh; /* Handle the row on mobile */
}
}
header h1
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$(document).ready(function(){
    AOS.init({ disable: 'mobile' });
});
/* For mobile support, delet the 'mobile' */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Fixed Header + Navbar + Animation Effects v.2"
Bootstrap 3.3.0 Snippet by eXP Design

Related: See More

Questions / Comments:

"Fixed Header + Navbar + Animation Effects v.2" Bootstrap 3.3.0 Snippet by eXP Design

Related: See More

Questions / Comments:

"Fixed Header + Navbar + Animation Effects v.2"
Bootstrap 3.3.0 Snippet by eXP Design